<template>
  <div class="container">
    <div class="banner">
      <img src="../../../static/images/newsBanner.jpg" class="img-res">
    </div>
    <article class="specialList">
      <h2 class="title">SPECIAL REPORT</h2>
      <el-row :gutter="20">
        <el-col :span="24" v-for="(item,index) in specialList" :key="index">
          <a :href="changeUrlPath(item.filename)">
            <div class="grid-content">
              <img :src="changeImgpath(item.litpic)" class="img-res">
              <h2>{{ item.title }}</h2>
              <span>{{ dataTime(item.senddate) }}</span>
              <p>{{ item.description }}</p>
            </div>
          </a>
        </el-col>
      </el-row>
      <div class="page">
        <el-pagination
        background
        layout="prev, pager, next"
        :pager-count=pager
        @current-change="handleCurrentChange"
        :total="total">
        </el-pagination>
      </div>
    </article>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      specialList: {},
      total: null,
      pager: 5
    }
  },
  mounted () {
    axios.get('/news/list/special').then(response => {
      this.specialList = response.data.data.data
      this.total = response.data.data.count
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    handleCurrentChange (val) {
      axios.get('/news/list/special?page=' + val).then(response => {
        this.specialList = response.data.data.data
      }).catch(function (error) {
        console.log(error)
      })
    },
    changeImgpath (img) {
      img = '//www.kefid.com' + img
      return img
    },
    changeUrlPath (url) {
      url = '//www.kefid.com/v3/special/' + url + '.html'
      return url
    },
    dataTime (time) {
      const timestamp = time
      const newDate = new Date()
      newDate.setTime(timestamp * 1000)
      time = newDate.toLocaleDateString()
      return time
    }
  }
}
</script>
<style scoped>
.container{
  padding: 52px 0 0 0;
}
.specialList{
  padding: 0 1rem;
}
.specialList .title{
  border-left: 0.2rem solid #db3f28;
  font-size: 1.4rem;
  padding: 0.8rem 1rem;
}
.specialList h2{
  font-size: 1.6rem;
}
.specialList p{
  font-size: 1.2rem;
}
.specialList .el-col-24 a{
  display: block;
  border-bottom: 1px solid #ccc;
}
.specialList .el-col-24{
  margin-bottom: 1rem;
}
.specialList .el-col-24 span{
  font-weight: 600;
  font-size: 1.2rem;
}
.specialList a{
  color: #444
}
.page{
  text-align: center;
  margin: 1rem 0;
}

</style>
